<import from="./pages/home"></import>
<import from="./pages/auth"></import>
<import from="./pages/child.html"></import>
<import from="./pages/fallback"></import>

<div class="message">${message}</div>
<nav>
  <a id="-link" load="/">Home</a>
  <a id="auth-link" load="auth">Register</a>
  <a load="child">Child</a>
  <a load="something/missing">Something missing</a>

  <a id="page-one-link" load="pages/one-route">Pages one-route</a>
  <a id="page-two-link" load="pages/two-route">Pages two-route</a>
  <a id="page-param-link" load="pages/params-route?p=123">Pages params-route 123</a>
</nav>

<au-viewport id="root-vp" name="root-vp" fallback="fallback" fallback-action="abort"></au-viewport>
<hr>
<div>Fragment hash: <span id="fragment-hash">${router.configuration.options.useUrlFragmentHash}</span> <button
    click.trigger="toggleFragmentHash()">Toggle url fragment hash</button></div>
<button click.trigger="toggleIframe()">Show iframe</button>
<iframe if.bind="iframeVisible" src.bind='iframeSrc'></iframe>
